<template>
  <div class="goods-sku" v-if="goods">
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{item.name}}</dt>
      <dd>
        <template v-for="i in item.values" :key="i.name">
        <img v-if="i.picture" :class="{selected:i.selected,disabled:i.disabled}" :src="i.picture" :title="i.name" @click="clickSpecs(item,i)">
        <span :class="{selected:i.selected,disabled:i.disabled}" @click="clickSpecs(item,i)" v-else>{{i.name}}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import getPowerSet from '@/vender/power-set'
// 生成字典的函数
const spliter = '★'
const getPathMap = (skus) => {
  const pathMap = {}
  skus.forEach((item) => {
    if (item.inventory) {
      const specs = item.specs.map(item => item.valueName)
      const pathSet = getPowerSet(specs)
      pathSet.forEach((set) => {
        const key = set.join(spliter)
        // console.log(set)
        if (pathMap[key]) {
          pathMap[key].push(item.id)
        } else {
          pathMap[key] = [item.id]
        }
      })
    }
  })
  // console.log(pathMap)
  return pathMap
}
// 生成选项选中状态的函数 取每一项里被选中的 没选则是undefined 【'黑色',undefined,undefined】
const getSelectedArr = (specs) => {
  const selectedArr = []
  specs.forEach((spec) => {
    // 选中的 会在这里赋值
    const selectedVal = spec.values.find(item => item.selected)
    // console.log(selectedVal)
    selectedArr.push(selectedVal ? selectedVal.name : undefined)
  })
  return selectedArr
}
// 模拟用户下一步选中的函数 一进页面就初始化选中状态 更新按钮的禁用状态
const updateDisabledStatus = (specs, pathMap) => {
  specs.forEach((spec, index) => {
    const selectedArr = getSelectedArr(specs) // 会带着选中的进来

    // 这里是模拟用户的下一步操作 从没选到都选了
    spec.values.forEach((val) => {
      // console.log(val)
      // 已经选中的按钮不用判断  // 0. 这一个字段用户已经选了 跳过
      if (val.name === selectedArr[index]) return false
      // 未选中的替换对应的值 // 没选就模拟测试
      selectedArr[index] = val.name // 1.这里就是用户点击后的情况
      // console.log(selectedArr)
      // 过滤无效值得到key  过滤到其他没点击的 防止下面对比字典出问题
      const key = selectedArr.filter(i => i).join(spliter)// 2.从这里获取用户点击的字典 要过滤掉undefined
      // console.log(key)
      // 设置禁用状态
      val.disabled = !pathMap[key]// 3.这里就是跟全部的字典对比 看是否存在 不存在则禁用
    })
  })
}
// 初始化选中状态
const initSelectedStatus = (skuId, goods) => {
  const sku = goods.skus.find(item => item.id === skuId)
  // console.log(sku)
  if (sku) {
    sku.specs.forEach((spec, index) => {
    // console.log(spec.valueName)
    // console.log(goods.specs[index])
      goods.specs[index].values.find(item => item.name === spec.valueName).selected = true
    // console.log(temp)
    })
  }
}
export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => ({})
    },
    skuId: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // 选项字典
    const pathMap = getPathMap(props.goods.skus)
    console.log(pathMap)
    // 先初始化状态组件初始化的时候更新禁用状态
    initSelectedStatus(props.skuId, props.goods)
    // 在生成字典
    updateDisabledStatus(props.goods.specs, pathMap)
    const clickSpecs = (item, val) => {
      // 如果是禁用状态不作为
      if (val.disabled) return false
      if (val.selected) {
        val.selected = false
        emit('change', {})
      } else {
        item.values.forEach(i => { i.selected = false })
        val.selected = true
        const res = getSelectedArr(props.goods.specs)
        if (!res.includes(undefined)) {
          // console.log(res)
          const key = res.join(spliter)
          const skuId = pathMap[key][0]
          // console.log(skuId)
          const sku = props.goods.skus.find(item => item.id === skuId)
          // console.log(sku)
          emit('change', {
            skuId: sku.id,
            price: sku.price,
            oldPrice: sku.oldPrice,
            inventory: sku.inventory,
            specsText: sku.specs.map(item => `${item.name}:${item.valueName} `).join('')
          })
        } else {
          // console.log('不完整')
          emit('change', {})
        }
      }
      // 点击的时候更新禁用状态
      updateDisabledStatus(props.goods.specs, pathMap)
    }
    return { clickSpecs }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        margin-bottom: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
